<template>
  <van-search
    v-model="value"
    shape="round"
    background="rgb(7, 166, 234)"
    placeholder="请输入搜索关键词"
    input-align="center"
  />
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="(item, index) in bannerlist" :key="index"
      ><img :src="item.bannerUrl" alt=""
    /></van-swipe-item>
  </van-swipe>
  <main>
    <div class="secrch">
      <h3>猜你喜欢</h3>
      <ul>
        <li>综合排序</li>
        <li @click="fn2()">距离最近</li>
        <li @click="fn3()">销量最高</li>
        <li>筛选</li>
      </ul>
      <ol>
        <li v-for="(item, index) in nav2" :key="index">{{ item.name }}</li>
      </ol>
    </div>
    <div class="content">
      <lazy-component>
        <div
          @click="Sjshoucang(item.mtWmPoiId)"
          class="main"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="left">
            <img :src="item.picUrl" />
          </div>
          <div class="right">
            <h4>{{ item.name }}</h4>
            <p>☆{{ item.wmPoiScore / 10 }} {{ item.monthSalesTip }}</p>
            <div class="center">
              <span>{{ item.shippingFeeTip }}</span>
              <span>{{ item.distance }}</span>
            </div>
            <div class="buttom">
              <span>35减12</span>
              <span>70减30</span>
              <span>150减50</span>
            </div>
          </div>
        </div>
      </lazy-component>
    </div>
  </main>
</template>
 
<script setup>
import { onMounted } from "vue";
import { shop_list, banner_list } from "../api/index";
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
var nav2 = reactive([
  { name: "年货节热卖" },
  { name: "京贴联盟" },
  { name: "消减优惠" },
  { name: "吃货联盟" },
]);
var list = ref([]);
var bannerlist = ref([]);
onMounted((res) => {
  shop_list({}).then((res) => {
    list.value = res.data.list;
  });
  banner_list().then((res) => {
    // console.log(res.data);
    bannerlist.value = res.data.list;
  });
});
var navClick=(index)=> {
     (ssIndex.value = index);
    }
    // 距离最近排序，小到大
var fn2=()=>{
      list.value.sort(
        (a, b) => a.distance.slice(0, -2) - b.distance.slice(0, -2)
      );
    }
    // 销量最高排序，大到小
var fn3=() =>{
      list.value.sort(
        (a, b) => b.monthSalesTip.slice(2) - a.monthSalesTip.slice(2)
      );
    }
    var $router = useRouter()
var Xqing=(id)=> {
      $router.push("/xqing/id");
    }
var Sjshoucang=(id) => {
      $router.push("/Sjshoucang/"+id);
    }



</script>

<style >
#app {
  padding: 0;
}
.van-swipe-item {
  box-sizing: border-box;
  width: 90vw;
  border-radius: 15px;
  margin: 0 auto;
  padding: 2vh 3vw;
}
.van-swipe-item img {
  width: 100%;
  border-radius: 5px;
}
.content {
  overflow: auto;
  width: 100vw;
  height: 90vh;
  /* background-color: antiquewhite; */
  box-sizing: border-box;
}
.content .main {
  margin: 3vh auto;
  display: flex;
  /* border: 1px solid gainsboro; */
  /* background-color: aqua; */
  height: 12vh;
  width: 96vw;
  box-sizing: border-box;
}

.content .main .left {
  width: 30vw;
}
.content .left img {
  width: 100%;
}
.content .main .right {
  padding: 0 5px;
  width: 68vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  /* background-color: red; */
}
.content .main .right .center {
  display: flex;
  width: 95%;
  justify-content: space-between;
}
.content .main .right .buttom span {
  border: 1px solid rgb(255, 132, 0);
  color: rgb(255, 132, 0);
  margin-right: 8px;
}
.scarch {
  width: 100vw;
  height: 5vh;
}
h3 {
  margin-left: 10px;
  height: 30px;
}
ul,
ol {
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  list-style: none;
}
ul li {
  text-align: center;
  min-width: 80px;
  height: 30px;
  line-height: 30px;
  color: rgb(60, 60, 60);
}
ol li {
  background-color: rgb(214, 214, 214);
  padding: 3px 5px;
}
ul li.active {
  color: black;
}
</style>